<template>
	<view>
		<u-navbar leftIconColor="#ffffff" :autoBack="true" title="关联店铺" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>

		<view class="tagtitle ">
			<view class="fbold" style="display: flex; justify-content: space-around;">
				<view class="fbold ft40" @click="selectItem('personal')"
					:style="{ color: selected === 'personal' ? '#3ACD90' : '#7D7D7D' }">个人关联</view>
				<view class="fbold ft40" @click="selectItem('team')"
					:style="{ color: selected === 'team' ? '#3ACD90' : '#7D7D7D' }">团队关联</view>
				
			</view>
			<view class="vertical-divider" style="margin-top: 30rpx;"></view>
			
			<!-- <view >
				<DaDropdownVue2
					ref="daDropdownVue2Ref"
				    :dropdownMenu="dropdownMenuList"
				    themeColor="#3ACD90"
				    textColor="black"
				    :duration="300"

				    @confirm="handleConfirm"
				    @close="handleClose"
				    @open="handleOpen">
					
				  </DaDropdownVue2>
			</view> -->

		</view>
		
		<view class="cell-box-center" v-for="(item,index) in linkShopList" :key="index">
			<view class="mtlr30 cell-box" style="display: flex;justify-content: space-between;">
				<view class="fbold">{{item.mer_name}}</view>
				<view style="display: flex;font-size:24rpx;color:#3ACD90">
					<view @click="checkDetail(item.mer_id)">查看详情</view>
					<u-icon name="arrow-right" color="#3ACD90"></u-icon>
				</view>
			</view>
			<view class="mtlr30 cell-box" style="display: flex;justify-content: space-between;">
				<view style="font-size:24rpx;">本月业绩:  {{item.sum_reward_points}}</view>
				<view>
					<u-button type="primary" color="red" text="营业中" :plain="true" size="mini"></u-button>
				</view>
			</view>
			<view class="mtlr30 cell-box" style="font-size:24rpx;display: flex;justify-content: space-between;">
				<view style="display: flex;">
					<view>商务ID: {{item.business_id}} (商户ID: {{item.admin.mer_id}}) </view>
					<view style="margin-left:10rpx;color:#3ACD90">100%</view>
				</view>
				<view style="display: flex;">
					<view>类型：</view>
					<view>{{item.merchantCategory.category_name}} {{ item.merchantType.type_name }}</view>
				</view>
				
			</view>
		</view>

	</view>

</template>

<script>
import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
import yeji from '@/components/yeji.vue'
import dayjs from 'dayjs';
import {
	myMerchantsList
} from "@/common/apis/user.js"
let currentTime = dayjs().format('YYYY-MM-DD')
export default {
	components: {
		DaDropdownVue2,
		yeji
	},
	data() {
		return {
			shangwuValue:"",
			selected: "personal",
			// 简单示例
			dropdownMenuList:[
				{
			      title: '筛选日期',
			      type: 'daterange',
			      prop: 'god1',
			      value: { start: currentTime, end: currentTime },
				  isHeight:"100%"
			    },
				{
				    title: '全部店铺',
				    type: 'filter',
				    prop: 'god2',
				    // 默认选中单选2、多选2、3、滑动30
				    value: { ft1: '1' },
					isHeight:"100%",
				    options: [
				      {
				        title: '',
				        type: 'radio',
				        prop: 'ft1',
				        options: [
				          { label: '全部店铺', value: '1' },
				          { label: '活跃店铺', value: '2' },
						  { label: '新进件店铺', value: '3' }
				        ],
				      },
					]
				},
				{
				    title: '所有商务',
				    type: 'select',
				    prop: 'god3',
					showArrow: true
				},
				
			],
			starttime:currentTime,
			endtime:currentTime,
			linkShopList:[]
		}
	},
	onShow(){
		this.getMyMerchantsList(0)
	},
	methods: {
		getMyMerchantsList(queryteam){
			myMerchantsList({query_team:queryteam}).then(res=>{
				console.log('res',res)
				if(res.status == 200){
					this.linkShopList = res.data.list
				}
			})
		},
		selectItem(item) {
			this.selected = item; // 更新选中的项
			this.linkShopList = []
			if(item == 'team'){
				this.getMyMerchantsList(1)
			}else{
				this.getMyMerchantsList(0)
			}
		},
		handleConfirm(v) {
			console.log('handleConfirm ==>', v)
			let copy_data = this.dropdownMenuList.slice();
			
			let chooseSelect = ""
			Object.keys(v).forEach(vm => {
				if (vm == 'god1'){
					
			
			    }else if (vm == 'god2') {
					chooseSelect = parseInt(v['god2'].ft1)
					let a = copy_data[1].options[0].options[chooseSelect-1].label
					this.$refs.daDropdownVue2Ref.updateMenu('god2', a,'title')
				  
			    }else if (vm == 'god3'){
					
				}
			});
		},
		handleClose(v) {
		  console.log('handleClose ==>', v)
		},
		handleOpen(v) {
		  console.log('handleOpen ==>', v)
		},
		checkDetail(mer_id){
			this.$Router.push({
				path: '/pages/other/yejidetail',
				query:{
					mer_id:mer_id
				}
			})
		}
	}
}
</script>

<style scoped>
	.cell-box-first{
		padding: 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.cell-box-center{
		background-color: #ffffff;
		margin-top:30rpx;
		border-radius:20rpx ;
	}
	.cell-box{
		padding: 10rpx;
		display: flex;
		align-items: center;
	}
	.cell-box-title{
		margin-left:30rpx;
		font-size:30rpx
	}
	.cell-box-center-inner{
		background-color: #ffffff;
		margin-top:30rpx;
		border-radius:20rpx ;
	}
	
	.center-second{
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding-bottom: 40rpx;
	}
	
	.vertical-divider {
		width: 100%;
		height: 2rpx;
		background-color: #D8D8D8;
	
	}
	.tagtitle {
		background-color: #ffffff;
		padding: 20rpx;
	
	}
	/deep/ .uni-nav-bar-text{
		font-size: 42rpx !important;
		font-weight: bold;
	}
	

	/deep/ .uniui-bottom {
		color: black !important
	}

	/deep/ .da-dropdown-menu{
		box-shadow: 0 0 0 0!important;
	}
	/deep/ .da-dropdown-filter--title{
		padding: 6rpx 0rpx !important;
	}
	/deep/ .da-dropdown-menu-item--text{
		font-size:30rpx !important
	}
	
	
	/deep/ .da-dropdown-menu-item--text {
		color:#3ACD90 !important
	}
	/deep/ .da-dropdown-tag{
		font-size:26rpx !important
	}
</style>